<template>
    <div style="background-color: antiquewhite;">
        状态管理
        <h1>这个是我儿子</h1>
        <SonBoy @boy="boyHandle"></SonBoy>
        <h2>这个是我女儿 </h2>
        <SonGirl @girl="girlHandle"></SonGirl>
        <p>给我儿子爆金币{{ gradBoy }}</p>
        <p>给我女儿爆金币{{ gradGirl }}</p>
        <p>我先看看小金库里有多少钱，哎只剩下 {{ store.money +'$'}}</p>
        <p>给女儿一百元<button @click.once="send(100)">奖励</button></p>
   
    </div>
</template>


<script>
import SonBoy from '@/components/SonBoy.vue';
import SonGirl from '@/components/SonGirl.vue';
import { useMyStore } from '@/store/myStore'; 

export default {
    components:{
        SonBoy,
        SonGirl
    },
    data() {
        return {
            gradBoy:'',
            gradGirl:'',
            store:useMyStore(),
            moneyBoy:0,
            moneyGirl:0
        }
    },
    methods: {
        boyHandle(val){
            this.gradBoy=val
        },
        girlHandle(val){
            this.gradGirl=val
        },
        send(val){
            if(this.gradBoy>this.gradGirl && this.gradBoy>=60){
                this.moneyBoy+=val
                this.store.decrement(val)
            }else if(this.gradGirl>this.gradBoy && this.gradGirl>=60){
                this.gradGirl+=val
                this.store.decrement(val)
            }
            else if(this.gradGirl==this.gradBoy && this.gradGirl>=60){
                this.moneyBoy=0
                this.gradGirl=0
                this.store.decrement(val)
            }
            else{
                alert("你们是谁？为什么在我家里？")
            }
        }
    },

  
}
</script>